<template>
  <div class="barMain">
    <qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" v-if="props.yScroll&&props.yScroll==1" />
    <qiun-data-charts type="column" :chartData="props.chartData" :opts="opts" v-else />
  </div>
</template>

<script setup lang="ts">
let props = defineProps(["chartData", "yScroll", "itemCount"]);

let opts = computed(() => {
  let obj = {
    color: [
      "#1890FF",
      "#91CB74",
      "#FAC858",
      "#EE6666",
      "#73C0DE",
      "#3CA272",
      "#FC8452",
      "#9A60B4",
      "#ea7ccc",
    ],
    padding: [15, 15, 0, 5],
    enableScroll: false,
    legend: {},
    xAxis: {
      disableGrid: true,
    },
    yAxis: {
      data: [
        {
          min: 0,
        },
      ],
    },
    extra: {
      column: {
        type: "group",
        width: 50,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08,
      },
    },
  };
  if (props.yScroll == 1) {
    obj.enableScroll = true;
    obj["touchMoveLimit"] = 24;
    obj.xAxis["scrollShow"] = true;
    obj.xAxis["itemCount"] = props.itemCount ? props.itemCount : 4;
  }
  return obj;
});
</script>

<style lang="scss" scoped>
</style>
